<template>
<div>
	<div class="g_top_box">
		<div class="g_right_box">
			<Button @click="download" style="margin-right:20px;">下载案例</Button>
			<Button type="primary" @click="import_data">导入数据</Button>
			
		</div> 
		<div class="g_left_box"><h4>银行记账列表</h4></div>
	</div>
	<!-- <content_top title="银行日记账"></content_top> -->
	
	<div class="g_list_box">
		<div class="g_filter_box">
			<Form  :label-width="50" style="width: 100%">
				<Select v-model="filter.company_id" style="width:150px">
					<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
				
				<DatePicker type="month" placeholder="选择月份" style="width: 150px" @on-change="month_change"></DatePicker>
				
				<Button type="primary" @click="qurey">搜索</Button>
			</Form>
		</div>
		<div class="g_list_box">
			<div v-if="info">
				<div style="margin-bottom: 5px;overflow: hidden;">
					<h3 style="float:left;">{{info.date_month_txt}}{{info.name}}银行记账 </h3>
					<div style="float:right;" v-if="info.balance_status==0">
						<span style="color: #999;">(注：双击可编辑)</span>
						<Button type="primary" @click="add_line">添加数据</Button>
					</div>
				</div>
				<Table :loading="loading" :columns="Columns" :data="info.cash_list" style="width: 100%;" :height="500" size="small" :border="true" @on-row-dblclick="dbedit">
					<div slot="footer" style="border-top: 1px solid #eee;padding: 0 10px; text-align: right;    font-size: 14px;">
						<div style="float: left;">
							期初余额：<span class="price">{{info.total_before}}</span>元
						</div>
						<div>
							<div style="line-height: 40px;">
								本月合计：借方总额<span class="price">{{info.total_from}}</span>元。
								贷方总额<span class="price">{{info.total_to}}</span>元。
								余额合计<span class="price">{{info.total}}</span>元。
							</div>
							<!--div style="line-height: 22px;">
								本年合计：借方总额<span class="price">{{info.total_before}}</span>元。
								贷方总额<span class="price">{{info.total_before}}</span>元。

							</div-->
						</div>
					</div>
				</Table>
			</div>

		</div>
	</div> 
	
	<Modal
        v-model="imports.show"
        title="导入数据"
        @on-ok="import_ok"
        >
        <div>
			 <Form :label-width="80">
				<FormItem label="选择公司">
					<Select v-model="imports.company_id" style="width:200px">
						<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
					</Select>
				</FormItem>
				<FormItem label="上传文件">
					<Upload
						multiple
						type="drag"
						:action="upload_url"
						:on-success="handleSuccess"
						:format="['xlsx','xls']"
						accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
						:max-size="20480"
						:on-format-error="handleFormatError"
						:on-exceeded-size="handleMaxSize"
						>
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>点击或者拖动上传文件</p>
						</div>
					</Upload>
				</FormItem>
			</Form>
			
			
		</div>
    </Modal>
	<Modal
        v-model="einfo.show"
        title="详细"
		:width="1000"
        @on-ok="einfo_ok"
        >
        <div>
			<table>
				<colgroup>
					<col :width="val.width?val.width:200" v-for="val in Columns" />
				</colgroup>
				<tr>
					<th v-for="val in Columns">{{val.title}}</th>
				</tr>
				<tr>
					<td v-for="(val,index) in Columns">
						<span v-if="Columns[index]['key']=='month'">{{einfo.info[Columns[index]['key']]}}</span>
						<Input v-model="einfo.info[Columns[index]['key']]" v-else  />
					</td>
				</tr>
			</table>
		</div>
    </Modal>
</div>
</template>

<script>
import content_top from '@/themes/components/content_top';

export default {
    name: 'cash_list',
    data () {
		let self = this;
        return {
			einfo:{
				show:false,
				info:{
					month:'',
					day:'',
					info:'',
					bill_num:'',
					from:'',
					to:'',
					type:'',
					balance:'',
					region:'',
					team:'',
					subject:'',
					name:'',
				}
			},
            Columns: [
				{
					title: '月',
					key: 'month',
					align: 'center',
                    width: 60,
                },
				{
                    title: '日',
					key: 'day',
					align: 'center',
					width: 60,
                },
				
				{
                    title: '摘要',
					key: 'info',
                },
				{
                    title: '票据号码',
					key: 'bill_num',
					width: 100,
					
                },
				{
                    title: '借  方',
					key: 'from',
					width: 120,
                },
				{
                    title: '贷  方',
					key: 'to',
					width: 120,
                },
				{
                    title: '方向',
					key: 'type',
					width: 80,
                },
				{
                    title: '余额',
					key: 'balance',
					width: 120,
                },
				{
                    title: '地区',
					key: 'region',
					width: 100,
                },
				{
                    title: '团队',
					key: 'team',
					width: 100,
                },
				{
                    title: '费用科目',
					key: 'subject',
					width: 150,
                },
				{
					title:'操作',
					key: 'action',
					width:150,
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'error',
									size: 'small',
									icon:'trash-a'
								},
								style: {
									
								},
								on: {
									click: () => {
										self.remove(params.row.id)
									}
								}
							}, '删除')
						]);
					}
				}
            ],
            info: null,
			loading:true,
			filter:{
				company_id:0,
				date_month:''
			},
			imports:{
				show:false,
				mark:'',
				company_id:0
			},
			upload_url:Whttp.upload_url,
			companyList:[]
        };
	},
	components:{
		content_top,
	},
	created(){
		
		this.load_company();
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = this.filter
			
			Whttp.load('Chuna/Bank/get_list',postdata,function(result){
				self.info = result;
				self.loading = false;
			});
		},
		load_company(){
			var self = this;
			
			var postdata = {
				page:1,
				size:1000
			}
			
			Whttp.load('User/Company/get_list',postdata,function(result){
				self.companyList = result.list;
			});
		},
		
		qurey(){
			this.load_data();
		},
		import_data(){
			this.imports.show = true;
		},
		import_ok(){
			var self = this;
			var postdata = {
				mark:this.imports.mark,
				company_id:this.imports.company_id
			};
			Whttp.load('Chuna/Bank/import_data',postdata,function(result){
				alert('导入成功');
			},function(result){
				alert(result.message);
			});
		},
		handleSuccess (res, file) {
			
			if(res.result_code==0){
				var ls_file = res.data[0];
				this.imports.mark = ls_file.mark;
			}
			
		},
		handleFormatError (file) {
			this.$Notice.warning({
				title: 'The file format is incorrect',
				desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
			});
		},
		handleMaxSize (file) {
			this.$Notice.warning({
				title: 'Exceeding file size limit',
				desc: 'File  ' + file.name + ' is too large, no more than 2M.'
			});
		},
		month_change(date){
			this.filter.date_month =  date;
		},
		download(){
			Whttp.load('Chuna/Cash/download',{name:'bank'},function(result){
				window.open(result);
			});
		},
		add_line(){
			var info = {};
			for(var i=0;i<this.Columns.length;i++){
				info[this.Columns[i].key] = '';
				if(this.Columns[i].key=='month'){
					if(this.filter.date_month==''){
						alert('请选择条件');
						return;
					}
					var months = this.filter.date_month.split('-');
					info[this.Columns[i].key] = months[months.length-1];
				}
			}
			
			this.einfo.info = info;
			this.einfo.show = true;
			
		},
		dbedit(row,index){
			this.einfo.info = row;
			this.einfo.show = true;
			
		},
		einfo_ok(){
		
			var self = this;
			var data =  [this.einfo.info];
			var postdata = {
				data:JSON.stringify(data),
				date_month:this.info.date_month,
				company_id:this.info.id
			};
			
			Whttp.load('Chuna/Bank/update',postdata,function(result){
				self.einfo.show = false;
				self.load_data();
				self.$Message.info('提交成功');
			});
			
		},
		remove(id){
			var self = this;
			if(!confirm('是否删除')){
				return false;
			}
			var postdata = {
				id:id
			};
			Whttp.load('Chuna/Bank/del',postdata,function(result){
				self.load_data();
				self.$Message.info('删除成功');
			});
		}
	}
};
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}
</style>